<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import {
  queryAdminHomeDataAPI,
  queryAdminHomeEducationAPI,
  queryAdminHomeIndustryAPI,
  queryAdminHomeJobAPI
} from "@/apis/admin.ts";

const chartRef1 = ref<HTMLDivElement | null>(null);
const chartRef2 = ref<HTMLDivElement | null>(null);
const chartRef3 = ref<HTMLDivElement | null>(null);
const chartRef4 = ref<HTMLDivElement | null>(null);

onMounted(async () => {
  if (chartRef1.value) {

    const chart1 = echarts.init(chartRef1.value);
    const res1 = await queryAdminHomeDataAPI();
    const res1Data1 = ref(0);
    const res1Data2 = ref(0);
    const res1Data3 = ref(0);
    if (res1.data.flag) {
      res1Data1.value = res1.data.data.jobCount;
      res1Data2.value = res1.data.data.employerCount;
      res1Data3.value = res1.data.data.userCount;
    }
    chart1.setOption({
      title: {
        text: '数据总汇',
        textStyle: {
          color: '#5470C6' // 修改文字颜色
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['求职者', '岗位', '企业']
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['求职者', '岗位', '企业'],
        axisLabel: {
          color: '#5470C6' // 修改x轴文字颜色
        }
      },
      series: [
        {
          name: '数据总汇-数量',
          type: 'bar',
          data: [res1Data1.value, res1Data2.value, res1Data3.value],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  }

  if (chartRef2.value) {
    const chart2 = echarts.init(chartRef2.value);
    const res2 = await queryAdminHomeIndustryAPI();
    const res2Data1 = ref(0);
    const res2Data2 = ref(0);
    const res2Data3 = ref(0);
    const res2Data4 = ref(0);
    const res2Data5 = ref(0);
    const res2Data6 = ref(0);
    const res2Data7 = ref(0);
    const res2Data8 = ref(0);
    if (res2.data.flag) {
      res2Data1.value = res2.data.data.internetEmployerCount;
      res2Data2.value = res2.data.data.serviceEmployerCount;
      res2Data3.value = res2.data.data.educationEmployerCount;
      res2Data4.value = res2.data.data.financeEmployerCount;
      res2Data5.value = res2.data.data.gameEmployerCount;
      res2Data6.value = res2.data.data.networkEmployerCount;
      res2Data7.value = res2.data.data.retailEmployerCount;
      res2Data8.value = res2.data.data.otherEmployerCount;
    }

    chart2.setOption({
      title: {
        text: '企业行业情况',
        textStyle: {
          color: '#FFA500'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['行业']
      },
      xAxis: {
        type: 'category',
        data: ['IT/互联网', '服务/餐饮', '教育/培训','金融/制造', '游戏/电子', '网络社交/媒体','零售/批发','其他行业'],
        axisLabel: {
          color: '#FFA500' // 修改x轴文字颜色
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '企业数量',
          type: 'bar',
          data: [res2Data1.value , res2Data2.value, res2Data3.value, res2Data4.value, res2Data5.value,res2Data6.value,res2Data7.value,res2Data8.value],
          itemStyle: {
            color: '#FFA500'
          }
        }
      ]
    });
  }

  if (chartRef3.value) {
    const chart3 = echarts.init(chartRef3.value);
    const res3 = await queryAdminHomeEducationAPI();
    const res3Data1 = ref(0);
    const res3Data2 = ref(0);
    const res3Data3 = ref(0);
    const res3Data4 = ref(0);
    const res3Data5 = ref(0);
    if (res3.data.flag) {
      res3Data1.value = res3.data.data.collegeCount;
      res3Data2.value = res3.data.data.undergraduateCount;
      res3Data3.value = res3.data.data.masterCount;
      res3Data4.value = res3.data.data.doctorCount;
      res3Data5.value = res3.data.data.otherCount;
    }
    chart3.setOption({
      title: {
        text: '求职者学历分布',
        textStyle: {
          color: '#32CD32'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'horizontal', // 修改图例方向为水平
        left: 'center', // 修改图例位置为居中
        bottom: '0' // 修改图例位置到底部
      },
      series: [
        {
          name: '学历',
          type: 'pie',
          radius: '60%',
          data: [
            {value: res3Data1.value, name: '本科'},
            {value: res3Data2.value, name: '硕士'},
            {value: res3Data3.value, name: '博士'},
            {value: res3Data4.value, name: '大专'},
            {value: res3Data5.value, name: '其他'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  }

  if (chartRef4.value) {
    const chart4 = echarts.init(chartRef4.value);
    const res4 = await queryAdminHomeJobAPI();
    const res4Data1 = ref(0);
    const res4Data2 = ref(0);
    const res4Data3 = ref(0);
    const res4Data4 = ref(0);
    const res4Data5 = ref(0);
    const res4Data6 = ref(0);
    const res4Data7 = ref(0);
    if (res4.data.flag) {
      res4Data1.value = res4.data.data.oneDayJobCount;
      res4Data2.value = res4.data.data.twoDayJobCount;
      res4Data3.value = res4.data.data.threeDayJobCount;
      res4Data4.value = res4.data.data.fourDayJobCount;
      res4Data5.value = res4.data.data.fiveDayJobCount;
      res4Data6.value = res4.data.data.sixDayJobCount;
      res4Data7.value = res4.data.data.sevenDayJobCount;
    }
    chart4.setOption({
      title: {
        text: '新增岗位变化',
        textStyle: {
          color: '#32CD32'
        }
      },
      tooltip: {},
      xAxis: {
        data: ['七天前', '六天前', '五天前', '四天前', '三天前', '两天前', '一天前'],
        axisLabel: {
          color: '#32CD32' // 修改x轴文字颜色
        }
      },
      yAxis: {},
      series: [
        {
          name: '在招岗位',
          type: 'line',
          data: [res4Data7.value, res4Data6.value, res4Data5.value, res4Data4.value, res4Data3.value, res4Data2.value, res4Data1.value],
          itemStyle: {
            color: '#32CD32'
          }
        }
      ]
    });
  }
});
</script>

<template>
  <div class="dashboard">
    <h1>数据展示大屏</h1>
    <div class="chart-container">
      <div ref="chartRef1" class="chart"></div>
      <div ref="chartRef2" class="chart"></div>
      <div ref="chartRef3" class="chart"></div>
      <div ref="chartRef4" class="chart"></div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
  text-align: center;
}

h1 {
  margin-bottom: 50px;
  color: #02366B;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.chart {
  width: 48%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
